<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions" :checkbox-item="false">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <edu-page-tabs :tab-list="xTabs" />
        <!--<title-user :row="options" />-->
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button size="mini" type="primary" @click="exportStudentInfo">导出记录</el-button>
        <el-dropdown class="import-student" trigger="click" @command="menuClick">
          <el-button size="mini" type="primary">
            导入学员
            <i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="importVisible">导入附件</el-dropdown-item>
            <el-dropdown-item command="download">下载模板</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button size="mini" type="primary" @click="visible = true">添加学员</el-button>
      </template>
    </page-list>
    <add-student :visible.sync="visible" :course-id="$route.params.id" />
    <import-student :visible.sync="importVisible" :course-id="$route.params.id" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
import AddStudent from '@/pages/course/student/add_student';
import ImportStudent from '@/pages/course/student/import_student.vue';
import User from '@/pages/user/student/account/components/user.vue';
import StudyStatus from '@/pages/course/video/student/components/study_status';
import CreateTime from '@/pages/course/video/student/components/create_time';
// import TitleUser from './components/title_user.vue';
import { Loading } from 'element-ui';
export default {
  components: {
    PageList,
    EduPageTabs,
    AddStudent,
    ImportStudent
    // TitleUser
  },
  inject: ['reload'],
  data() {
    return {
      uri: 'course/admin/agent/school/' + this.$route.params.id + '/user',
      xTabs: [
        {
          title: '课程列表',
          uri: '/course/agent/school',
          meta: {
            permission: 'course.agent.school'
          }
        },
        {
          title: '学员',
          uri: '/course/agent/school/' + this.$route.params.id + '/user',
          meta: {
            permission: 'course.agent.school.user'
          }
        }
      ],
      custom: {
        user: User,
        study_status: StudyStatus,
        create_time: CreateTime
      },
      options: {
        cover_url: '',
        title: '',
        price: '0.00',
        cost_price: '0.00'
      },
      visible: false,
      importVisible: false,
      doactions: [
        {
          title: '详情',
          callback: this.info,
          display: ({ row }) => {
            return row.learn_section_count > 0;
          }
        },
        { title: '移除', callback: this.delete }
      ]
    };
  },
  methods: {
    // 详情
    info: function({ row }) {
      this.$router.push({ path: '/course/video/' + this.$route.params.id + '/student/' + row.user_id + '/info' });
    },
    delete: function({ row }) {
      this.$box
          .confirm('确认移除吗')
          .then(() => {
            this.$http.delete(
                '/course/admin/video/' + this.$route.params.id + '/student/' + row.user_id + '/delete',
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {});
    },
    menuClick: function(command) {
      if (command == 'download') {
        window.open('/template/excel/导入课程学员模板.xlsx', '_blank');
      } else {
        this.importVisible = true;
      }
    },
    /**
     * 导出学员学习记录
     */
    exportStudentInfo: function() {
      const loadingInstance = Loading.service({
        text: '正在导出文件，请稍后...'
      });

      this.$http
          .downloadExcel('/course/admin/video/' + this.$route.params.id + '/student/export')
          .then(() => {
            loadingInstance.close();
            this.$message.success('下载成功');
          })
          .catch(() => {
            loadingInstance.close();
            this.$message.error('下载失败');
          });
    }
  }
};
</script>

<style scoped>
.import-student {
  margin-left: 20px;
  margin-right: 20px;
}
</style>
